<template>
	<div id="newrank">
		<div class="head">
			<p>{{userCard.nick_name}}</p>
		</div>
		<div class="navtab">
			<div class="nav_child" v-for="(item,index) in navlist" :key="index" v-bind:class="actives == index ? 'actived' : '' " @click="selecttab(index)">{{item.text}}</div>
		</div>
		<ul class="ranklist">
			<li v-for="(item,index) in memberlist" :key="index" v-if="memberlist.length>0">
				<view class="icon_list" v-if="index < 3" :class="'icon_list icon_list' + (index + 1)"></view>
				<view v-else class="icon_list">{{ index + 1 }}</view>
				<view class="icon_modile">
                   <img :src="item.user_picture" alt="">
                   {{item.nick_name}}
               </view>
				<span class="icon_people">{{item.total_view_count}}</span>
			</li>
			<div class="defaultimg" v-if="memberlist.length ==0">
				<img :src="constant.imgUrl+'publicicon/icon_ranking.png'" alt="" class="no_rank">
			</div>
			<div class="p" v-if="memberlist.length == 0">暂无数据</div>
		</ul>
		<p class="look_more" @click="lookmore" v-if="memberlist.length > 0">查看更多排行数据></p>
	</div>
</template>

<script>
import { relationUserSort } from '@/api/staffManage'

export default {
	name: 'MemberRanking',
	data() {
		return {
			constant: this.$constant,
			browse_data: [
				{ nick_name: '张楚岚', relation_type: 2, total_view_count: 2 },
				{ nick_name: '风扇', relation_type: 3, total_view_count: 10 },
				{ nick_name: '武当', relation_type: 1, total_view_count: 11 },
				{ nick_name: '峨眉', relation_type: 2, total_view_count: 2 },
				{ nick_name: '华山', relation_type: 2, total_view_count: 2 }
			],
			navlist: [
				{ text: '获客排行数' },
				{ text: '转发排行数' },
				{ text: '浏览量排行数' }
			],
			actives: 0,
			page: 1,
			memberlist: [],
			orderRanklist: '', // 获客排行
			rankList: '', // 流量排行
			shareRankList: '', // 转发排行
			userCard: ''
		}
	},
	onLoad(option) {
		this.option = option
		this.getrank()
	},
	methods: {
		selecttab(index) {
			this.actives = index
			if (index == 0) {
				this.memberlist = this.orderRanklist
			} else if (index == 1) {
				this.memberlist = this.shareRankList
			} else {
				this.memberlist = this.rankList
			}
		},
		getrank() {
			let data = {
				limit: 10,
				page: 1
			}
			relationUserSort(data).then((res) => {
				if (res.status === 'success') {
					this.orderRanklist = this.orderRanklist.concat(res.data.fissionPrebookRankList.list)
					this.rankList = this.rankList.concat(res.data.rankList.list)
					this.shareRankList = this.shareRankList.concat(res.data.shareRankList.list)
					this.userCard = res.data.userCard
					this.memberlist = res.data.fissionPrebookRankList.list
				}
			})
		},
		lookmore() {
			this.page++
			 let type = ''
			if (this.actives == 0) {
				type = 2
			} else if (this.actives == 1) {
				type = 1
			} else {
				type = 0
			}
			let query = {
				owner_user_id: this.option.owner_user_id,
				tabIndex: type,
				sourcetype: 'memberRank'
			}
			uni.navigateTo({
				url: `/pages/admin/staffManage/enterActionRank${this.commonJS.queryData(query)}`
			})
		}
		/* skiptoranklist(type) { // 流量排行
			let query = {
				owner_user_id: this.option.owner_user_id,
				tabIndex: type,
				sourcetype: 'memberRank'
			}
			uni.navigateTo({
				url: `/pages/admin/staffManage/enterActionRank${this.commonJS.queryData(query)}`
			})
		},
		skiptoaddmem() {
			let query = {
				edittype: 'addmember'
			}
			uni.navigateTo({
				url: `/pages/admin/staffManage/addStaff${this.commonJS.queryData(query)}`
			})
		}*/
	}
}
</script>

<style scoped lang="scss">
	#newrank{
		.head{
			width: 100%;
			height: 231px;
			background: url($imgUrl +'publicicon/member_rank.png');
			background-size: 100%;
			p{
				color: #FFCFCA;
				margin-left: 40px;
				margin-top: 20%;
				display: inline-block;
			}
		}
		.navtab{
			width: 100%;
			height: 80px;
			background: #EB4544;
			.nav_child{
				width: 33.33%;
				height: 80px;
				float: left;
				position: relative;
				text-align: center;
				line-height: 80px;
				color: #FFCFCA;
				font-size: 30px;
				background: #EB4544;
			}
			.actived{
				color:white;
				font-weight: bold;
			}
			.actived::after {
				content: '';
				display: block;
				position: absolute;
				bottom: 0;
				width:0px;
				height:0px;
				left: 43%;
				border-top:15px solid rgba(0,0,0,0);
				border-right:15px solid  rgba(0,0,0,0);
				border-bottom:15px solid white;
				border-left:15px solid  rgba(0,0,0,0);
			}
		}
		.ranklist{
			background: white;
			li{
				height: 110px;
				width: 90%;
				margin-left: 5%;
				display: inline-block;
				line-height: 110px;
				border-bottom: 1px solid #DDDDDD;
				background: url($imgUrl + 'center/icon_right_arrow_large.png') right center / 15px 20px no-repeat;
				.icon_list{
					float: left;
					width: 48px;
					height: 60px;
					text-align: center;
					line-height: 60px;
					display: -webkit-box;
					word-break: break-all;
					/* autoprefixer: ignore next */
					-webkit-box-orient: vertical;
					/* autoprefixer: on */
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin-top: 4%;
					text-overflow: ellipsis;
					background: center center / 100% 100%;
				}
				.icon_modile{
					float: left;
					height: 60px;
					margin-top: 4%;
					margin-left: 55px;
					line-height: 55px;
					img{
						width: 60px;
						height: 60px;
						float: left;
						margin-right: 5px;
						border-radius: 50%;
					}
				}
				.icon_people{
					float:right;
					color:#666666;
					margin-right: 4%;
				}
			}
			li:nth-child(1) .icon_list1{
				background-image: url($imgUrl + 'center/icon_rank1.png');
			}
			li:nth-child(2) .icon_list2{
				background-image: url($imgUrl + 'center/icon_rank2.png');
			}
			li:nth-child(3) .icon_list3{
				background-image: url($imgUrl + 'center/icon_rank3.png');
			}
			.defaultimg{
				display: inline-block;
				width: 500px;
				height: 257px;
				margin-left: 16%;
				margin-top: 15%;
				.no_rank{
					float: left;
					width: 100%;
					height: 100%;
				}
			}
			.p{
				padding: 20px;
				text-align: center;
			}
		}
		.look_more{
			color:#FF6900;
			font-size: 28px;
			text-align: center;
		}
	}
</style>
